<!-- 防抖 -->
<template>
  <div class="box">
    <!-- 防抖时间 -->
    <!-- export const Debounce = (fn, t) => {
      let delay = t || 500;
      let timer;
      return function () {
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          timer = null;
          fn.apply(this, args);
        }, delay);
      };
    }; -->
    <div>
      <input type="text" v-model="value" @keydown="hangleChange" />
    </div>
  </div>
</template>

<script>
function debounce(func, wait = 1000) {
  //可以放入项目中的公共方法中进行调用
  let timeout;
  return function (event) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.call(this, event);
    }, wait);
  };
}
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    hangleChange: debounce(function (e) {
      console.log(this.value);
    }),
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
</style>